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【 摘 要 】 在 BIM 技术 的 背景 下 ,针对 现 有 的 BIM 服务 器 多 为 C/S 架构 ,对 电脑 软 硬 件 有 较 高 要 求 、 无 法 跨 平台 等 
问题 ,实现 BIM 模型 在 Web 端的 重建 ,并 实现 了 对 模型 的 拾取 ,获取 其 属性 。 其 方法 主要 分 为 两 部 分 ,第 一 部 分 实 
” 现 BIM 模型 从 Revit 软件 中 的 导出 ,第 二 部 实现 对 其 导出 的 模型 信息 在 Web 端的 三 维 交 互 , 具 有 良好 的 用 户 体验 。 
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引言 

下 ,建筑 信息 模型 ( Building Information Modeling) 
是 近年 来 兴起 的 新 概念 ,在 建筑 的 设计 、 施工. 运 维 
的 仿生 命 周期 中 应 用 价值 极 高 ,已 成 为 建筑 业 的 新 
趋 驻 "。 目 前 主流 的 BIM 服务 器 多 为 C/S 架构 ,而 
CZS 架 构 的 桌面 应 用 程序 对 电脑 软 硬 件 和 软件 使 用 
者 都 有 一 定 的 要 求 ”。 随 着 互联 网 的 发 展 和 移动 
终 器 的 普及 ,在 Web 端 展 示 BIM 模型 已 成 为 BIM 
从 外 人 员 的 潜在 需求 ,具有 极 高 应 用 价值 。 因 此 ， 
对 军 建 筑 信 息 模 型 在 Web 端 重建 与 三 维 交 互 的 研 
究 是 十 分 必要 的 。 

本 文 基于 在 Revit 平台 下 建立 好 的 模型 ,使 用 C 

# 语 言 ,通过 对 Revit 进行 二 次 开发 ,提取 出 建筑 模 
型 几何 数据 及 属性 信息 。 利 用 WebGL 技术 构建 三 
维 交 互 平台 并 加 载 三 维 模型 ,利用 计算 机 图 形 学 技 
术 实 现 鼠 标 和 网 页 三 维 场景 中 的 模型 进行 互动 。 


1 Revit 中 的 BIM 数据 导出 
Revit Architecture 软件 是 Autodesk 公司 专门 对 
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建筑 行业 开发 的 BIM 工具 ,在 建筑 领域 应 用 非常 广 
泛 ” 。Revit 平台 是 开放 的 , 它 具 有 强大 的 二 次 开发 
端口 ,提取 模型 信息 可 以 在 Revit 平台 下 通过 Revit 
API 相关 属性 来 实现 。 对 Revit 模型 信息 的 提取 ,其 
中 包括 模型 几何 数据 ,材质 、 纹 理 等 属性 数据 。 由 
于 本 技术 应 用 前 提 是 在 三 维 视 图 中 ,因此 程序 开始 
时 要 判断 doc. ActiveView 是 否 为 Yiew3D 对 象 , 当 不 
在 三 维 视图 下 弹出 警告 框 。RevitAPI 提供 了 专门 的 
导出 类 CustomExporter, 通过 自 定 义 一 个 导出 类 
CMyExporter ,继承 IExportContext 类 ,实现 接口 里 面 
所 有 的 方法 ,IExportContext 导出 类 中 的 Onmaterial 
() 方 法 ,可 以 获取 到 材质 相关 信息 ,插件 还 调用 了 
OnPolymesh , OnElementBegin、OnElementEnd 等 函数 
接口 ,用 于 获取 Revit 模型 的 节点 属性 ,例如 坐标 
点 、 材 质 信息 、 贴 图 数据 等 。 

该 数据 导出 插件 开发 步骤 如 图 1 所 示 。 

依据 上 述 步 又 ,可 以 在 Revit 软件 上 开发 自动 
提取 建筑 信息 模型 数据 的 功能 插件 。 应 用 具体 操 
作 如 下 :在 Visual Studio 2013 平台 上 ,引用 Revit 接 
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弹出 提示 框 


获取 模型 几何 数据 ， 
材质 、 纹 理 等 属性 数据 
写 入 JSON 文 件 
Ss 输出 到 硬盘 
(OO 指定 位 置 
和 
j 图 1 数据 导出 插件 开发 步骤 
CN 


加害 义 文件 Revit-API. dl 和 RevitAPIUL dll 以 及 部 
分 榴 Revit API 提供 的 命 8 名 空 s 间 ， 使 用 C# 语 言 号 言 按 以 


志和 完成 插件 的 开发 。 然 后 再 Revit 平台 下 选取 
附 天 模块 调用 该 插件 即 可 。 

S< ,二 在 数据 导出 插件 的 开发 过 程 中 ,需要 解决 以 下 
ji 双关 键 问 是 。 

人 (1) 获 取 几 何 数据 


例如 墙 的 几何 数据 主要 是 一 个 由 面 和 边 组 成 
的 几何 实体 ,由 以 下 步骤 可 获取 : 

1) 通 过 载 类 型 a te 性 Geometry 获取 Ge- 
ometryElement 的 实例 。 这 个 实例 里 面 存储 了 所 有 
相关 的 几何 对 象 ,如 实体 、 线 等 ; 

2) 遍 历 GeometryElement 实例 来 得 到 一 个 几何 
实体 solid ,这 个 几何 实体 solid 的 Faces 和 Edges 属 
性 里 面包 含 了 所 有 的 几何 面 和 边 ; 

3 ) 遍 历 Faces 属性 得 到 所 有 几何 面 ; 

4) 遍 历 Edges 属性 得 到 所 有 的 几何 边 。 

(2) 获 取材 质 信 息 

获取 模型 材质 信息 ,主要 使 用 Revit 中 所 提供 
的 API, IExportContex 导出 类 中 的 OnMaterial ( ) 方 
法 ,Material 对 象 中 包含 材质 名 ,颜色 ,填充 图 形 等 信 
息 。 核 心 代码 如 下 : 

// 利 用 Material 的 AppearanceAssetId 属性 得 
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到 AppearanceAssetld 

Elementld appearanceld = material. Appearance- 
Assetld; 

// 通 过 上 面 取得 的 AppearanceAssetId 取得 Ap- 
pearanceAssetElement 

AppearanceAssetElement appearanceElem = docu- 
ment. GetElement ( appearanceld ) as AppearanceAs- 
setElement; 

// 获 得 Asset 

Asset theAsset = appearanceElem. GetRender- 
ingAsset( ) ; 


2 ”BIM 模型 的 Web 端 重建 及 交互 


通过 以 上 插件 ,已 将 Revit 中 构建 的 模型 转换 
成 JOSN 格式 文件 ,JSON 是 可 被 WebGL 解析 的 通 
用 数据 格式 。 本 文 借助 WebGL 的 第 三 方 引擎 
Three. js 来 实现 其 功能 。 
2.1 模型 载 入 


Three. js 需要 依托 网 页 才能 发 挥 作 用 ,系统 需 
要 建立 在 HTML 结构 之 上 ,获取 最 新 Three. js 包 之 
后 ,在 HTML 的 head 里 面 的 < script > 标签 里 面 舱 
入 Three. js 库 文 件 ,首先 初始 化 一 个 浑 染 器 对 象 
render, 然 后 创建 一 个 场景 ,在 Three. js 中 场景 ,场景 
用 于 容纳 所 有 的 其 他 对 象 ,再 往 场景 中 添加 一 个 相 
机 ,相机 定义 了 我 们 从 哪里 观察 场景 ,WebGL 中 的 
相机 有 两 种 : 正 投影 相机 和 透视 相机 ,透视 相机 类 
似 于 真实 世界 中 的 相机 , 近 处 物体 比例 大 , 远 处 物 
体 比 例 小 ,本 文 使 用 透视 相机 ,最 后 再 调用 泻 染 器 
的 render( ) 方 法 ,来 处 理 场景 和 相机 。Three. js 的 
基本 演 染 结构 如 图 2 所 示 。 


3 ~ 

泻 染 器 (THREE. WebGLRenderer) 

场景 (THREE.Scene) 
相机 
(THREE. Perspe 
景 中 待 展示 的 所 有 ctiveCamera) 
对 象 
有 2 

< 有 


图 2 Three.js 基本 泻 染 结构 
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准 交 到 方法 研究 ChinaXiy 合 作 期 于 


Three. js 的 编程 原理 较为 简单 ,一 般 流 程 为 : 

1) 对 演 染 器 ,场景 三 维 对 象 相 机 进行 初始 化 
设置 ; 

2) 将 三 维 对 象 添 加 到 场景 中 ; 

3 ) 将 场景 和 相机 添加 到 演 染 器 中 

4) 用 泻 染 吉 将 其 在 屏幕 上 深 染 出 来 。 

在 Three. js 中 ,把 模型 加 载 到 浏览 器 的 过 程 如 
图 3 所 示 : 


服务 器 上 的 模型 wl! JavaScript 解 析 
文件 ， 以 文本 方 -> 内江 下 各 模 |_、 要 型 文件 ， 并 生 | 显示 在 场景 中 
式 存储 成 Mesh 模 型 


3 ”模型 加 载 过 程 


之 服务 器 上 的 模型 文件 是 以 文本 方式 存储 ,存储 
者 型 的 硕 点 、 材 质 等 信息 ,第 二 步 是 浏览 器 下 载 
文本 文件 ， 使 用 javascript 的 异步 请 求 来 实现 ,然后 
JavaScript 解析 文本 文件 ， 生成 一 个 geometry 再 生成 
Vet 模型 ,最 后 将 其 加 入 到 场景 中 。 在 Three. js 中 
TREE Mesh 用 来 表示 网 格 模型 , 它 的 构造 函数 是 
THREE. Mesh = function ( geometry ,material ) , 其 中 第 
-可 参数 是 一 个 THREE. Geometry 类 型 的 对 象 , 定 
poi 点 和 顶点 之 间 的 连接 关系 ,第 二 个 参数 定义 
了 禄 型 材质 属性 。 
导出 后 的 JSON 文件 在 前 文中 有 详细 的 分 析 ， 
uee. js 框架 中 内 置 了 THREE. JSONLoader( ) 类 ， 
该 要 可 以 对 JSON 格式 的 模型 进行 解析 ,并 载 人 到 
浏览 器 中 ,将 前 文 所 导出 的 JSON 格式 Revit 模型 通 
过 锐 类 可 载 信 到 浏览 器 , 载 人 时 需要 获取 Revit 模 
型 的 几何 信息 ,包括 顶点 数据 , 面 数据 ,及 材质 信 
息 ,包括 所 导出 的 模型 材质 .属性 。 载 入 的 模型 放 
入 Three.js 的 场景 中 ,CPU 会 读 取 顶点 信息 ,并 通过 
顶点 着 色 器 中 来 处 理 每 个 顶点 ,完成 模型 绘制 。 

2.2 模型 拾取 

在 前 文 已 获取 模型 JSON 文件 的 基础 上 ,为 实 
现 用 户 与 建筑 信息 模型 在 Web 端的 三 维 交互 ,就 要 
使 用 WebGL 技术 ,然而 WebGL 只 是 三 维 图 形 库 ,其 
中 并 没有 内 置 任何 点 击 检 测 的 方法 ,这 需要 经 过 一 
系列 的 数学 变化 来 自己 构建 。 其 中 最 为 重要 的 三 
维 交 互 之 一 就 是 处 理 并 找 出 鼠标 指针 位 于 哪 一 页 
面 元 素 之 上 ,这 种 交互 式 的 可 视 化 程序 可 以 大 大 增 
强 用 户 体验 。 

首先 要 实现 鼠标 的 点 击 检测 ,第 一 步 要 获得 射 


线 的 矢量 。 鼠 标点 击 屏幕 上 p "点 时 ,对 应 于 投影 空 

ne s 间 中 p 的 对 应 点 是 v, 在 视 
空间 中 的 原点 和 v 两 点 相连 形成 一 条 射线 。 最 后 
要 将 射线 的 坐标 转换 为 世界 坐标 。 


A 


图 4 ”模型 拾取 射线 相交 


法 例 图 


(1) 将 鼠标 点 击 屏幕 的 点 坐标 变换 为 投影 空间 
中 近 裁剪 面 (A  ,B ,C  ,D  ) 中 的 坐标 , 定 Z 轴 深 
度 为 0.5。 使 用 数学 的 解析 几何 运算 ,得 到 以 下 变 
换 公式 : 
p、= (x—screenWidth/2)/screenWidth * 2 
p, = —- (y— screenHeigth/2) screenHeight * 2 
bb, =0.5 
(1) 
(2) 为 得 到 在 视图 空间 中 的 坐标 ,对 上 一 步 中 
得 到 的 投影 空间 中 的 点 坐标 进行 矩阵 变换 ,将 投影 
空间 中 原点 设 为 近 剪 裁 面 (A ,B ,C ,D ) 的 
中 心 。 


Tw 0 0 0 
. 0 h 0 0 
pMatrix = 
0 0 Q 1 
L0 0 -0Q 0 
mll 0 0 0 
0 m2 0 0 
= (2) 
0 0 m33 1 
L 0 0 m43 0 
w=cot(angl/2) * (1/aspect) 
h = cot(angl/2) 
(3) 


aspect = screen Width/ screenHeigth 
Q =2Z{/(Zf -Zn) 
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式 (2) 是 投影 变换 矩阵 ,从 原点 0 到 近 剪 裁 面 
A'`B"C2D 的 最 短 距离 用 Zn 表示 ,从 原点 0 到 远 
剪裁 面 ABCD 的 最 短 距离 用 Xf 表示 ,angl 表示 原点 
到 A’B’ 中 点 的 夹 角 值 ,screenWidth 代表 屏幕 的 宽 
度 ,screenHeight 代表 屏幕 的 高 度 。 在 经 过 投影 空间 
变换 和 视图 空间 变换 后 ,推导 出 投影 空间 中 的 点 p 
和 视图 空间 中 的 点 v 的 关系 如 下 : 

(ps * Zn,p, * Zn,Zn) = (Vv, * p_Matrix. mll,v， 
* pMatrix. m22 , Vz * ©Q — QZn,v,) (4) 

其 中 P,P,,P 了 ,分别 表示 p 点 的 x,y,z 轴 坐 标 
点 ,而 V,,V,,V, 分 别 表示 V 的 x,y,z 轴 坐 标点 。 由 
式 (5) 可 得 下 式 : 


p. * Zn =v, * pMatrix. mll 


= 
Sp, * Ln =v, * pMatrix. m22 (5) 
CO p; * Zn =v,* 0 -QZn 
< 因为 P 点 的 z 值 为 0, 所 以 V 点 的 各 坐标 可 用 

区 5 ) 计 算得 出 ; 

a Vv =p, * Ln/ pMatrix. ml1l 

Vv, =p, * Zn/ pMatrix. m22 (6) 


二 一 
> Vv, =Zn 
〇 (3) 通 过 计算 得 出 射线 的 方向 矢量 由 式 (6) 得 
到 刻 线 方向 矢量 的 各 分 量 计算 公式 如 下 ， 
之 v_dir x=(v, -0)ZZn 
>< v_dir y= (v, -0)/Zn (7) 
v_dir z= (v, -0)/Zn 
斧 (4) 最 后 计算 世界 坐标 下 的 射线 向 量 , 使 用 和 矩 
阵 症 换 , Vworldspace 为 待 求 的 世界 向 量 , Vviewspace 
为 视图 空间 下 的 向 量 , Mview-l 代表 视图 空间 转换 
到 世界 空间 的 和 矩阵。 根据 矩阵 转换 公式 就 可 以 得 
到 在 世界 空间 下 射线 的 向 量 "*。 
而 (8) 
在 Three.js 框架 内 实现 鼠标 点 击 监测 的 过 程 如 
图 5 所 示 : 
在 实现 了 鼠标 的 点 击 检测 ,匹配 到 被 点 击 的 图 
元 对 象 ,获得 该 图 元 的 ID 标识 ,通过 遍历 每 个 图 元 
所 特有 的 DD 标识 可 获取 该 图 元 属性 信息 ,利用 HT- 
MLS 技术 将 其 打印 到 屏幕 上 ,实现 图 元 属性 查询 。 
实验 结果 如 图 6 所 示 : 
2.3 三 维 交互 
使 用 Three. js 中 的 createCameraControls 方法 创 
建 一 个 新 的 THREE. TrackballControls 实例 ,传人 了 


获取 鼠标 坐标 并 转换 为 客户 端 坐 
标 THREE.Vector2(x,y) 


l 


客户 端 坐标 转换 为 视 口 坐 标 
THREE.Vector3(x,y,z) 


l 


创建 一 条 射线 Ray 并 获取 相交 物 
体 THREE.Ray() 


l 


通过 距离 排序 选取 最 近 相 交 物 体 


intersectObject(object,recursive) 


图 5 Three.js 点 击 检测 过 程 


localhost/demo/inde» x 


¢ co0 OR 


图 6 三维 模型 可 视 化 单 击 显示 属性 信息 


一 个 相机 对 象 和 泻 染 器 的 DOM 元 素 。 通 过 对 相机 
控制 的 属性 设置 来 控制 平移 、 缩 放 、 旋 转 等 行为 。 
TrackballControls 控制 方式 如 表 1 所 示 : 


表 1 TrackballControls 控制 方式 


鼠标 操作 动作 
按 住 左 键 , 拖 动 在 场景 中 转动 相机 
转动 滚轮 放大 缩小 
按 住 中 键 \ 拖 动 放大 缩小 
按 住 右键 、 拖 动 在 场景 中 平移 


通过 轨迹 球 来 实现 对 相机 的 操控 ,同时 还 需要 
添加 Web 端 对 鼠标 的 监听 事件 来 对 鼠标 发 出 的 点 
击 滚轮 事件 来 实现 与 三 维 模型 的 实时 交互 。 根 据 
左右 键 按 下 的 不 同 , 鼠标 事件 会 用 不 同 的 方式 来 移 
动 相机 。 通 过 鼠标 操作 "放大 ”缩小 “平移 ”“ 视 
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图 7 三 维 模型 缩放 旋转 效果 展示 


-mm 快捷 查看 任意 关键 部 位 ,不 会 出 现 卡 参考 文献 
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Abstract :Under the present BIM technology background ,in view that most existing BIM servers are under C/S 
frameworks ,jssues appears in higher request on the computer software and hardware ,failure in cross-platform opera- 
tion ,ete. This reports our work on implementing reconstruction of BIM model on web ,and realizing collecting the 
building model and acquiring its properties. The method is mainly divided into two parts. Firstly ,the BIM model is 
derived from Revit ,and secondly ,the model information exported can achieve 3D interaction on Web ,which posses- 
ses good user experience. 
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